import {Component, EventEmitter, OnInit, Output, Input} from '@angular/core';
import {LayersPanelService} from './layers-panel.service';
import {Map} from 'ol';
import {NzMessageService} from 'ng-zorro-antd/message';

@Component({
    selector: 'kylin-layers-panel',
    templateUrl: './layers-panel.component.html',
    styleUrls: ['./layers-panel.component.less']
})
export class LayersPanelComponent implements OnInit {
    @Output() stateChange = new EventEmitter<any>();
    @Input() state = false;
    @Input() map: Map;
    layer = null;
    title = '图层面板';
    width = 460;
    id = -1;

    constructor(private layersPanelService: LayersPanelService,
                private nzMessageService: NzMessageService) {

    }

    ngOnInit() {
        this.layersPanelService.titleObservable.subscribe((value: string) => {
            this.title = value;
        })
    }

    onResize(event): void {
        const width = event.width;
        cancelAnimationFrame(this.id);
        this.id = requestAnimationFrame(() => {
            this.width = width;
        });
    }

    close() {
        this.state = false;
        this.stateChange.emit(false);
    }

    open(title: string) {
        if (title !== '图层面板' && !this.layer) {
            this.nzMessageService.error('请先选择图层!');
            return;
        }
        this.layersPanelService.$changeTitleObservable(title);
    }

    selectLayerChange($event) {
        this.layer = $event;
    }

}
